<template>
	<div class="remenhuati">
		<div class="darensou">
			<div class="darensou1">
				<input type="search" value="" placeholder="请输入商品名称" />
				<button>
					<i class="el-icon-search"></i>
				</button>
			</div>
			<div class="darensou2">
			    <ul>
					<li>全部</li>
					<li>蓝V发布</li>
					<li>小助手发布</li>
				</ul>
			</div>
		</div>
		
		<div class="huatibiao">
			<table cellpadding="0" cellspacing="0">
				<thead>
					<tr>
						<th>话题</th>
						<th>热度</th>
						<th>总播放量</th>
						<th>使用人数</th>
						<th>主要分类</th>
						<th>热门视频</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="(item,index) in 5" :key="index">
						<td>
							<router-link :to="'/home/'+luyou+'/huatixiangqing'">
								我们都是打工人
							</router-link>
						</td>
						<td>90.6</td>
						<td>65.5w</td>
						<td>113.4w</td>
						<td>剧情 | 搞笑</td>
						<td>
							<ul>
								<li v-for="(item,index) in 3" :key="index">
									<img src="../../../assets/img/yuanqi3.png" />
								</li>
							</ul>
						</td>
						<td>
							<img class="xianshuju1" src="../../../assets/img/shuju1.png" />
							<img class="xianshuju2" src="../../../assets/img/shuju2.png" />
							
							<img @click="aixindian(index)" v-if="aixinxian!=index" src="../../../assets/img/aixin1.png" />
							<img @click="aixindian(index)" v-if="aixinxian==index" src="../../../assets/img/aixin2.png" />
						</td>
					</tr>
				</tbody>
			</table>
		</div>
		
		<div class="fenye" style="text-align: center;">
			<el-pagination
			  @size-change="handleSizeChange"
			  @current-change="handleCurrentChange"
			  :hide-on-single-page="yindi"
			  :current-page="currentPage4"
			  :page-sizes="[100, 200, 300, 400]"
			  :page-size="100"
			  layout="total, sizes, prev, pager, next, jumper"
			  :total="4001">
			</el-pagination>
		</div>
		
	</div>
</template>

<script>
	export default{
		name:'remenhuati',
		data(){
			return{
				shu:2138428,
				luyou:'',
				//分页
				yindi:true,//当数据是由一页时，就不显示分页器
				currentPage4: 1,
				
				//操作
				aixinxian:-1,
			}
		},
		activated() {
			
		},
		created(){
			this.luyou=this.$route.path.split("/")[2];
		},
		mounted:function(){
			//出现加载动画开始和结束
			this.$store.commit("startLoading")
			this.$store.commit("endLoading")
			
			//数据图标hover效果
			$(".xianshuju1").hover(function(){
				$(this).css({"display":'none'});
				$(this).siblings(".xianshuju2").css({"display":'block'});
			},function(){
				$(this).css({"display":'block'});
				$(this).siblings(".xianshuju2").css({"display":'none'});
			})
			
			$(".darensou2 ul li").click(function(){
				$(this).css({
					'background-color': '#0091FF',
					'color': '#fff',
					'border-radius':'0.05rem' ,
				})
				$(this).siblings().css({
					'background-color': '#fff',
					'color': '#0091FF',
					'border-radius':'0rem' ,
				})
			})
		},
		//过滤器
		filters:{
			guolv(shuzi){
				  if(shuzi>0){
					var wan=parseInt(shuzi).toString();
					var qumo=wan%10000;
					//粉丝数改变
					if(wan.length<5){
						shuzi=wan;
					}else if(wan.length>4 && wan.length<=8){
						let fen_si=parseFloat(parseInt(wan/10000))+'.'+qumo.toString().substring(0,2)+'w';
						shuzi=fen_si;
					}else if(wan.length>8){
						let fen_si=parseFloat(parseInt(wan/100000000))+'.'+qumo.toString().substring(0,2)+'亿';
						shuzi=fen_si;
					}
				  }
				  return shuzi
			}
		},
		methods:{
			//操作
			aixindian(index){
				this.aixinxian=index;
			},
			
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
			}
		}
	}
</script>

<style scoped="scoped" lang="scss">
	*{
		margin: 0;
		padding: 0;
	}
	.remenhuati{
		
		.darensou{
			
			.darensou1{
				float: left;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border: 1px solid #D4D4D4;
				
				input{
					border: none;
					outline: none;
					width: 7rem;
					height: 1.1rem;
					letter-spacing: 0.02rem;
					padding-left:0.4rem ;
					font-size: 0.4rem;
				}
				input::placeholder{
					color: #D3D3D3;
					font-size: 0.35rem;
				}
				button{
					border: none;
					outline: none;
					padding: 0.3rem;
					background-color: #fff;
					font-size: 0.4rem;
				}
			}
			.darensou2{
				float: right;
				margin-left:1rem ;
				color: #333333;
				font-size: 0.5rem;
				letter-spacing: 0.05rem;
				margin-top:0.2rem ;
				background-color: #fff;
				border: 1px solid #D4D4D4;
				
				ul{
					list-style: none;
					
					li{
						cursor: pointer;
						width: 2.5rem;
						text-align: center;
						color: #0091FF;
						font-size: 0.4rem;
						padding: 0.1rem 0.2rem;
						float: left;
					}
					li:nth-of-type(1){
						background-color: #0091FF;
						color: #fff;
						border-radius:0.05rem ;
					}
					li:nth-of-type(2){
						border-left:1px solid #D4D4D4 ;
						border-right:1px solid #D4D4D4 ;
					}
				}
			}
		}
		.darensou::after{
			content: "";
			display: block;
			clear: both;
		}
		
		.huatibiao{
			background-color: #fff;
			margin-top:1rem ;
			border-radius:0.1rem ;
			
			table{
				width: 100%;
				
				th{
					color: #333333;
					font-size: 0.42rem;
					padding: 1rem 0;
					font-weight: normal;
				}
				tr:hover td{
					background-color: #E5F4FF;
				}
				td:not(:first-child){
					color: #333333;
					font-size: 0.42rem;
					padding: 1.5rem 0;
					text-align: center;
				}
				td:nth-of-type(1) a{
					display: block;
					color: #333333;
					font-size: 0.42rem;
					padding: 2rem 0;
					text-align: center;
					text-decoration: none;
				}
				td:nth-of-type(1) a:hover{
					color: #0091FF;
					cursor: pointer;
				}
				
				td:nth-of-type(6){
					width: 7.5rem;
					padding:0 0.8rem ;
					
					ul{
						list-style: none;
						display: flex;
						justify-content: space-between;
						align-items: center;
						
						li{
							position: relative;
							img{
								width:2rem;
							}
						}
					}
				}
				
				td:nth-of-type(7){
					display: flex;
					justify-content: space-around;
					align-items: center;
					padding: 2rem 0;
					
					img{
						cursor: pointer;
						width: 0.5rem;
						height: 0.5rem;
					}
					.xianshuju1{
						// margin-right:0.3rem ;
					}
					.xianshuju2{
						// margin-right:0.3rem ;
						display: none;
					}
				}
			}
		}
	}
</style>
